<template>
  <div
    ref="screen"
    v-loading="dashboardLoading"
    :class="['dashboard', isFullScreen ? 'full-screen' : 'not-full-screen']"
  >
    <div ref="dashboard" class="dashboard-screen" :style="dashboardStyle">
      <div class="dashboard-content">
        <!-- :style="dashboardChildrenStyle" -->
        <div class="dashboard-name"></div>
        <div class="statistics-header">
          <el-row :gutter="20">
            <el-col :span="6" class="statistics-col">
              <div class="statistics">
                <div class="statistics-name">
                  <span>累计授信金额</span>
                </div>
                <div class="statistics-num">
                  ¥
                  {{
                    setMonry(
                      Math.round(
                        summaryData.creditTotalAmount / 100 > 1000000
                          ? summaryData.creditTotalAmount / 1000000
                          : summaryData.creditTotalAmount / 100
                      )
                    )
                  }}
                  {{
                    summaryData.creditTotalAmount / 100 > 1000000 ? '万' : ''
                  }}
                  <div class="statistics-title">元</div>
                </div>
              </div>
            </el-col>
            <el-col :span="6" class="statistics-col">
              <div class="statistics">
                <div class="statistics-name">
                  <span>累计授信人次</span>
                </div>
                <div class="statistics-num">
                  {{ summaryData.creditPassTotalCount }}
                  <div class="statistics-title">人</div>
                </div>
              </div>
            </el-col>
            <el-col :span="6" class="statistics-col">
              <div class="statistics">
                <div class="statistics-name">
                  <span>当日授信金额</span>
                </div>
                <div class="statistics-num">
                  ¥
                  {{
                    setMonry(
                      Math.round(
                        summaryData.creditPassAmount / 100 > 1000000
                          ? summaryData.creditPassAmount / 1000000
                          : summaryData.creditPassAmount / 100
                      )
                    )
                  }}
                  {{ summaryData.creditPassAmount / 100 > 1000000 ? '万' : '' }}
                  <div class="statistics-title">元</div>
                </div>
              </div>
            </el-col>
            <el-col :span="6" class="statistics-col">
              <div class="statistics">
                <div class="statistics-name">
                  <span>当日授信人数</span>
                </div>
                <div class="statistics-num">
                  {{ summaryData.creditPassUserCount }}
                  <div class="statistics-title">人</div>
                </div>
              </div>
            </el-col>
          </el-row>
          <el-row :gutter="20">
            <el-col :span="6" class="statistics-col">
              <div class="statistics">
                <div class="statistics-name">
                  <span>当日申请人数</span>
                </div>
                <div class="statistics-num">
                  {{ summaryData.creditUserCount }}
                  <div class="statistics-title">人</div>
                </div>
              </div>
            </el-col>
            <el-col :span="6" class="statistics-col">
              <div class="statistics">
                <div class="statistics-name">
                  <span>审核中人数</span>
                </div>
                <div class="statistics-num">
                  {{ summaryData.creditInAuditUserCount }}
                  <div class="statistics-title">人</div>
                </div>
              </div>
            </el-col>
            <el-col :span="6" class="statistics-col">
              <div class="statistics">
                <div class="statistics-name">
                  <span>当日用信金额</span>
                </div>
                <div class="statistics-num">
                  ¥
                  {{
                    setMonry(
                      Math.round(
                        summaryData.drawPassAmount / 100 > 1000000
                          ? summaryData.drawPassAmount / 1000000
                          : summaryData.drawPassAmount / 100
                      )
                    )
                  }}
                  {{ summaryData.drawPassAmount / 100 > 1000000 ? '万' : '' }}
                  <div class="statistics-title">元</div>
                  <div class="statistics-title">元</div>
                </div>
              </div>
            </el-col>
            <el-col :span="6" class="statistics-col">
              <div class="statistics">
                <div class="statistics-name">
                  <span>当日用信人数</span>
                </div>
                <div class="statistics-num">
                  {{ summaryData.drawPassUserCount }}
                  <div class="statistics-title">人</div>
                </div>
              </div>
            </el-col>
          </el-row>
        </div>

        <div class="statistics-center">
          <div class="statistics-center-left">
            <div class="title">授信趋势图</div>
            <dashboard-Line :chart-data="lineChartData" />
          </div>
        </div>

        <div class="statistics-footer">
          <div class="statistics-footer-left">
            <div class="title">金额分布图</div>
            <!-- <div id="userPie3" ref="userPie3"></div> -->
            <dashboard-Pie :chart-data="moneyData" />
          </div>
          <div class="statistics-footer-center">
            <div class="title">年龄维度</div>
            <!-- <div id="userPie1" ref="userPie1"></div> -->
            <dashboard-Pie :chart-data="ageData" />
          </div>
          <div class="statistics-footer-right">
            <div class="title">地域维度</div>
            <!-- <div id="userPie2" ref="userPie2"></div> -->
            <dashboard-Pie :chart-data="addressData" />
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script lang="ts">
console.log('werer了')
// 具体用法查看官方API:https://github.com/kaorun343/vue-property-decorator
import { Component, Vue, Watch, Prop } from 'vue-property-decorator'
import { SettingsModule } from '@/store/modules/settings'
import { AppModule } from '@/store/modules/app'
import { debounce, get } from 'lodash'
import { setTimeout } from 'timers'
import { dashboard } from '@/api/risksystem/dashboardHome/index'
import { riskAdjustScreen } from '@/utils/index'
import reportTest1 from '@/assets/report/report-test1.png'
import { parseTime } from '@/utils/index'
// import LineConfig from './dashboardLine'
// import Pie1Config from './dashboardPie1'
// import Pie2Config from './dashboardPie2'
// import Pie3Config from './dashboardPie3'
import {
  getSummaryData,
  getUserageData,
  gethoursData,
  getProvinceData,
  getamountData
} from '@/api/risksystem/dashboard/index'
import dashboardLine, { ILineChartData } from './components/dashboardLine.vue'
import dashboardPie, { moneyPieData } from './components/dashboardPie.vue'
// import agePie, { agePieData } from './age.vue'
@Component({
  name: 'dashboard',
  components: {
    //引用的组件在这里声明
    dashboardLine,
    dashboardPie
  }
})
export default class extends Vue {
  @Prop({ default: '' }) private propExp1!: string
  // @Prop({ required: true }) private propExp2?: boolean
  private dataExp: any = ''
  private clientHeight: number | string = ''
  private dashboardStyle = {}
  private dashboardChildrenStyle = {}
  private timer1: any
  private dashboardLoading = false
  private lineData = {}
  private summaryData = {}
  private datePicker = []
  private lineChartData: any = {}
  private moneyData: any = []
  private addressData: any = []
  private ageData: any = []
  private testConfig: any = {
    begin: '',
    end: ''
    // source: '360'
  }
  private pickerOption = {
    disabledDate(time: any) {
      let curDate = new Date().getTime()
      let month = 30 * 24 * 3600 * 1000
      let oneMonth = curDate - month
      return time.getTime() > Date.now() || time.getTime() < oneMonth
    }
  }
  get isFullScreen() {
    return SettingsModule.isFullScreen
  }
  get sidebarOpen() {
    return AppModule.sidebar.opened
  }
  get dashboardType() {
    return SettingsModule.dashboardType
  }
  @Watch('dashboardType')
  created() {
    // 最早可以调用vue组件method的钩子
    this.getDashboardList()
  }
  mounted() {
    this.init()
    this.getLineData()
    this.getAgeData()
    this.getprovinceData()
    this.getamountData()
    console.log('fk')
  }
  private init() {
    //自适应，以屏幕宽度为app的宽度，自动调整dashboard高宽度

    //mounted 钩子
    this.dashboardStyle = {
      width: `0px`,
      height: `0px`
    }
    this.$nextTick(() => {
      let tempStyle = riskAdjustScreen(
        (this.$refs.screen as any).offsetWidth,
        (this.$refs.screen as any).offsetHeight
      )
      this.dashboardStyle = tempStyle.dashboardStyle
      this.dashboardChildrenStyle = tempStyle.dashboardChildrenStyle
    })
    window.onresize = debounce(() => {
      this.dashboardStyle = {
        width: `0px`,
        height: `0px`
      }
      this.$nextTick(() => {
        let tempStyle = riskAdjustScreen(
          (this.$refs.screen as any).offsetWidth,
          (this.$refs.screen as any).offsetHeight
        )
        this.dashboardStyle = tempStyle.dashboardStyle
        this.dashboardChildrenStyle = tempStyle.dashboardChildrenStyle
      })
    }, 10)
  }
  beforeDestroy() {
    // 摧毁监听事件
    window.onresize = null
    clearInterval(this.timer1)
  }
  private methodExp() {
    // method创建地方
  }
  // 汇总
  private async getDashboardList() {
    const { data } = await getSummaryData()
    this.summaryData = data.stats
  }
  // 进件分时统计
  private async getLineData() {
    const { data } = await gethoursData()
    this.lineChartData = data
  }
  // 金额分布
  private async getamountData() {
    const { data } = await getamountData()
    var legend = data.stats.map(function(item: any) {
      return item.name
    })
    this.moneyData = [data.stats, legend]
  }
  // 获取年龄分布
  private async getAgeData() {
    const { data } = await getUserageData()
    var legend = data.stats.map(function(item: any) {
      return item.name
    })
    this.ageData = [data.stats, legend]
  }
  // 获取省份分布
  private async getprovinceData() {
    const { data } = await getProvinceData()
    var legend = data.stats.map(function(item: any) {
      return item.name
    })
    this.addressData = [data.stats, legend]
    // let provinceChart = new Pie2Config('userPie2')
  }
  private changeDashboardType(val: any) {
    console.log(val)
    SettingsModule.ChangeSetting({
      key: 'dashboardType',
      value: val
    })
  }
  private setMonry(data: any) {
    var reg = /\d{1,3}(?=(\d{3})+$)/g
    return (data + '').replace(reg, '$&,')
    // return data.toFixed(2).replace(/(\d)(?=(\d{3})+\.)/g, '$1,') //使用正则替换，每隔三个数加一个','
  }
}
</script>

<style lang="scss" scoped>
.dashboard {
  position: absolute;
  top: 0;
  right: 0;
  left: 0;
  background: $bgBlack;
  min-height: inherit;
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  background: url('./../../../assets/risk-dashboard/bg.png') no-repeat center;
  background-size: 100% 100%;
  .dashboard-screen {
    width: 100% !important;
    height: 100% !important;
    // width: 1404px;
    // height: 790px;
    // background: url('./../../../assets/risk-dashboard/bg.png') no-repeat center;
    // background-size: 100% 100%;
    .dashboard-content {
      height: 100%;
      width: 100%;
      // height: 1080px;
      // width: 1920px;
      font-size: 100px;
      // display: flex;
      // justify-content: space-between;
      padding: 0 0.45em;
      overflow-y: auto;
      .dashboard-name {
        width: 100%;
        height: 130px;
        // background: url('./../../../assets/risk-dashboard/title-name.png')
        //   no-repeat center;
        background: url('./../../../assets/risk-dashboard/risk-title-name.png')
          no-repeat center;
        background-size: contain;
      }
      .statistics-header {
        width: 100%;
        height: auto;
        padding: 24px 24px 0;
        margin: 0 0 24px 0 !important;
        background: url('./../../../assets/risk-dashboard/header-bg.png')
          no-repeat center;
        background-size: 100% 100%;
        .statistics-col {
          display: flex;
        }
        .statistics {
          width: 100%;
          border-radius: 2px;
          font-size: 16px;
          margin-bottom: 35px;
          background: url('./../../../assets/risk-dashboard/header-title-bg.png')
            no-repeat center;
          background-size: 100% 100%;
          .statistics-num {
            position: relative;
            display: inline-block;
            width: 100%;
            height: 52px;
            padding: 10px;
            font-size: 26px;
            font-family: PingFang SC;
            font-weight: bold;
            white-space: nowrap;
            text-align: center;
            color: rgba(111, 231, 252, 1);
            .statistics-title {
              width: 21px;
              height: 20px;
              font-size: 22px;
              font-family: PingFang SC;
              font-weight: 800;
              color: rgba(111, 231, 252, 1);
              position: absolute;
              bottom: 40%;
              right: 0px;
            }
          }
          .statistics-name {
            display: inline-block;
            white-space: nowrap;
            width: 100%;
            margin-bottom: 40px;
            font-size: 20px;
            font-family: PingFang SC;
            font-weight: bold;
            color: rgba(108, 225, 251, 1);
          }
        }
      }
      .statistics-center {
        background: url('./../../../assets/risk-dashboard/center-bg.png')
          no-repeat center;
        background-size: 100% 100%;
        margin-bottom: 24px;
        // .statistics-center-left {
        //   flex: 1;
        //   #userLine {
        //     width: 100%;
        //     height: 471px;
        //   }
        // }
      }
      .statistics-footer {
        display: flex;
        .statistics-footer-left {
          width: 33.3%;
          margin-right: 24px;
          background: url('./../../../assets/risk-dashboard/footer-bg.png')
            no-repeat center;
          background-size: 100% 100%;
          // #userPie3 {
          //   width: 100%;
          //   height: 350px;
          // }
        }
        .statistics-footer-center {
          width: 33.3%;
          margin-right: 24px;
          background: url('./../../../assets/risk-dashboard/footer-bg.png')
            no-repeat center;
          background-size: 100% 100%;
          // #userPie1 {
          //   width: 100%;
          //   height: 350px;
          // }
        }
        .statistics-footer-right {
          width: 33.3%;
          background: url('./../../../assets/risk-dashboard/footer-bg.png')
            no-repeat center;
          background-size: 100% 100%;
          // #userPie2 {
          //   width: 100%;
          //   height: 350px;
          // }
        }
      }
    }
  }
}
.full-screen {
  position: fixed;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  z-index: 1002;
}
@media screen and (min-width: 800px) and (max-width: 1200px) {
  .title {
    color: rgba(108, 225, 251, 1);
    padding: 24px;
    font-size: 22px !important;
    background: url('./../../../assets/risk-dashboard/title-bg.png') no-repeat
      146px 34px !important;
    background-size: 72px 12px !important;
  }
  .statistics {
    margin-bottom: 25px !important;
    .statistics-num {
      height: 37px !important;
      padding: 4px !important;
      font-size: 22px !important;
      color: rgba(111, 231, 252, 1);
      .statistics-title {
        width: 16px !important;
        height: 16px !important;
        font-size: 16px !important;
      }
    }
    .statistics-name {
      margin-bottom: 30px !important;
      font-size: 16px !important;
    }
  }
}
.title {
  color: rgba(108, 225, 251, 1);
  padding: 24px;
  font-size: 29px;
  background: url('./../../../assets/risk-dashboard/title-bg.png') no-repeat
    146px 34px;
  background-size: 132px 18px;
}
.font-color {
  color: #6ce1fb;
}
</style>
